<%= render "shared/error_messages", resource: resource %>

<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
      <%= t("registrations.sign_up_hero") %>
    </h2>

    <%= render "devise/shared/sign_in_link" %>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white p-4 pb-8 px-4 shadow sm:rounded-lg sm:px-10">
      <%= form_for resource, as: resource_name, url: registration_path(resource_name), html: {class: "space-y-6"} do |form| %>
        <%= invisible_captcha %>

        <div>
          <%= form.label :email, class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-1">
            <%= form.email_field :email, autocomplete: "email", required: true, class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm", autofocus: true %>
          </div>
        </div>

        <div>
          <%= form.label :password, class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-1">
            <%= form.password_field :password, autocomplete: "new-password", required: true, class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm" %>
          </div>
        </div>

        <div>
          <%= form.label :password_confirmation, class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-1">
            <%= form.password_field :password_confirmation, autocomplete: "new-password", required: true, class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm" %>
          </div>
        </div>

        <div>
          <%= form.button t("registrations.register"), class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
